<template>
  <div class="enroll">
    <div class="header">
      <el-tabs
        v-model="activeName"
        class="demo-tabs"
        @tab-change="handleTabClick"
      >
        <el-tab-pane label="录取名单" :name="1"></el-tab-pane>
        <el-tab-pane label="复试名单" :name="2"></el-tab-pane>
      </el-tabs>
      <el-space>
        <el-button
          v-if="activeName == 1"
          type="success"
          :icon="CirclePlus"
          @click="addInfo(1, 'add')"
          >新增</el-button
        >
        <el-button
          v-if="activeName == 1"
          type="danger"
          :icon="UploadFilled"
          @click="upload"
          >导入</el-button
        >
        <el-select
          v-model="selectYear"
          placeholder="选择年份"
          @change="yearChange"
        >
          <el-option
            :label="ele"
            :value="ele"
            v-for="ele in yearOptions"
            :key="ele"
          ></el-option>
        </el-select>
        <el-button
          v-if="activeName == 1"
          type="danger"
          :icon="Delete"
          :loading="deleteLoading"
          @click="batchDelete"
          >批量删除</el-button
        >
      </el-space>
    </div>
    <div class="table mohu" v-if="activeName == 1">
      <el-table
        v-loading="loading"
        stripe
        element-loading-text="数据加载中..."
        empty-text="暂无数据，请重新选择条件查询"
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column prop="ssnf" label="年份" width="100" />
        <!-- <el-table-column prop="zymc" label="专业名称" /> -->
        <!-- <el-table-column prop="zydm" label="专业代码" width="120" /> -->
        <!-- <el-table-column prop="yjfxnr" label="研究方向" width="180" /> -->
        <el-table-column prop="kmycj" label="政治/综合" width="100" />
        <el-table-column prop="kmecj" label="外语" width="100" />
        <el-table-column prop="kmscj" label="业务课一" width="100" />
        <el-table-column prop="kmsicj" label="业务课二" width="100" />
        <el-table-column prop="xm" label="姓名" />
        <el-table-column prop="yzyxxmc" label="一志愿学校" />
        <el-table-column prop="zcj" label="总分" />
        <el-table-column prop="cs" label="初试成绩" />
        <el-table-column prop="fs" label="复试成绩" />
        <el-table-column prop="zxjh" label="专项计划" />
        <el-table-column fixed="right" label="操作" width="100">
          <template #default="scope">
            <el-button
              link
              type="primary"
              size="small"
              @click="handleClick(scope.row, 1, 'edit')"
              >编辑</el-button
            >
            <el-button
              link
              type="primary"
              size="small"
              @click="handleDelete(scope.row, 1)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="table mohu" v-if="activeName == 2">
      <el-table
        v-loading="loading"
        stripe
        element-loading-text="数据加载中..."
        empty-text="暂无数据，请重新选择条件查询"
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column prop="ssnf" label="年份" width="100" />
        <el-table-column prop="xm" label="姓名" />
        <!-- <el-table-column prop="lqxxmc" label="复试院校" width="120" />
        <el-table-column prop="xymc" label="复试学院" width="180" />
        <el-table-column prop="zydm" label="专业代码" /> -->
        <el-table-column prop="zymc" label="专业名称" />
        <el-table-column prop="xxfsmc" label="学习方式" />
        <el-table-column prop="yjfxnr" label="研究方向" />
        <el-table-column prop="cs" label="初试成绩" />
        <el-table-column prop="fs" label="复试成绩" />
        <!-- <el-table-column prop="yzyxxmc" label="一志愿院校" /> -->
        <el-table-column
          prop="tag"
          label="录取情况"
          width="100"
          :filters="[
            { text: '已录取', value: '已录取' },
            { text: '未录取', value: '未录取' },
            { text: '未知', value: '未知' },
          ]"
          :filter-method="filterTag"
          filter-placement="bottom-end"
        >
          <template #default="scope">
            <el-tag
              :type="
                scope.row.enrollFlagStr == '已录取'
                  ? 'success'
                  : scope.row.enrollFlagStr == '已录取'
                  ? 'error'
                  : 'info'
              "
              disable-transitions
              >{{ scope.row.enrollFlagStr }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template #default="scope">
            <el-button
              link
              type="primary"
              size="small"
              @click="handleClick(scope.row, 2, 'edit')"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      v-model="editDialog"
      :title="titleName"
      width="500px"
      :before-close="handleClose"
    >
      <div class="upload">
        <el-form
          :model="admissionFormData"
          label-width="100px"
          class="demo-ruleForm"
          v-if="ReferType == 1"
          status-icon
        >
          <el-form-item label="年份" prop="ssnf">
            <el-input v-model="admissionFormData.ssnf" />
          </el-form-item>
          <el-form-item label="政治/综合" prop="kmycj">
            <el-input v-model="admissionFormData.kmycj" />
          </el-form-item>
          <el-form-item label="外语" prop="kmecj">
            <el-input v-model="admissionFormData.kmecj" />
          </el-form-item>
          <el-form-item label="业务课一" prop="kmscj">
            <el-input v-model="admissionFormData.kmscj" />
          </el-form-item>
          <el-form-item label="业务课二" prop="kmsicj">
            <el-input v-model="admissionFormData.kmsicj" />
          </el-form-item>
          <el-form-item label="姓名" prop="xm">
            <el-input v-model="admissionFormData.xm" />
          </el-form-item>
          <el-form-item label="一志愿学校" prop="yzyxxmc">
            <el-input v-model="admissionFormData.yzyxxmc" />
          </el-form-item>
          <el-form-item label="总分" prop="zcj">
            <el-input v-model="admissionFormData.zcj" />
          </el-form-item>
          <el-form-item label="初试成绩" prop="cs">
            <el-input v-model="admissionFormData.cs" />
          </el-form-item>
          <el-form-item label="复试成绩" prop="fs">
            <el-input v-model="admissionFormData.fs" />
          </el-form-item>
          <el-form-item label="专项计划" prop="zxjh">
            <el-input v-model="admissionFormData.zxjh" />
          </el-form-item>
        </el-form>
        <el-form
          :model="retestFormData"
          label-width="100px"
          class="demo-ruleForm"
          v-if="ReferType == 2"
          status-icon
        >
          <el-form-item label="年份" prop="ssnf">
            <el-input v-model="retestFormData.ssnf" />
          </el-form-item>
          <el-form-item label="姓名" prop="xm">
            <el-input v-model="retestFormData.xm" />
          </el-form-item>
          <el-form-item label="专业名称" prop="zymc">
            <el-input v-model="retestFormData.zymc" />
          </el-form-item>
          <el-form-item label="学习方式" prop="xxfsdm">
            <el-select
              v-model="retestFormData.xxfsdm"
              clearable
              class="search"
              style="width: 100%"
              @change="learningChange"
              placeholder="学习方式"
            >
              <el-option
                v-for="item in studyType"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="研究方向" prop="yjfxnr">
            <el-input v-model="retestFormData.yjfxnr" />
          </el-form-item>
          <el-form-item label="初试成绩" prop="cs">
            <el-input v-model="retestFormData.cs" />
          </el-form-item>
          <el-form-item label="复试成绩" prop="fs">
            <el-input v-model="retestFormData.fs" />
          </el-form-item>
          <el-form-item label="专项计划" prop="zxjh">
            <el-input v-model="retestFormData.zxjh" />
          </el-form-item>
          <el-form-item label="录取情况" prop="enrollFlagStr">
            <el-input v-model="retestFormData.enrollFlagStr" />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editDialog = false">取消</el-button>
          <el-button
            type="primary"
            :loading="buttonLoading"
            @click="confirmEdit(ReferType)"
            >确认</el-button
          >
        </span>
      </template>
    </el-dialog>
    <el-dialog
      v-model="importDialog"
      title="导入录取名单"
      width="500px"
      :before-close="handleImportClose"
    >
      <el-upload
        class="upload-demo"
        drag
        accept=".xls,.xlsx"
        :action="action"
        :data="excelData"
        :headers="headers"
        :on-success="onSuccess"
        :limit="1"
        :on-exceed="onExceed"
      >
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">上传录取名单</div>
      </el-upload>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="importDialog = false">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { CirclePlus, UploadFilled, Delete } from "@element-plus/icons-vue";
import { Bell } from "@element-plus/icons-vue";
import { ref, onMounted, defineProps } from "vue";
import {
  useList,
  fushiList,
  correctMajorInfo,
  deleteStudent,
  addStudent,
  importStudent,
} from "@/api/api";
import store from "@/store";
import { decrypt } from "@/utils/parseDate";
import { defineEmits } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import "element-plus/theme-chalk/el-message-box.css";
const emit = defineEmits(["onChange"]);
// 将 myMethod 暴露给父组件
defineExpose({ childMethod });
function childMethod() {
  getUseList();
}

const importDialog = ref(false);
const admissionFormData = ref({});
const retestFormData = ref({});
const dataScholl = ref({});
const buttonLoading = ref(false);
const editDialog = ref(false);
function handleImportClose() {
  importDialog.value = false;
}
const action = ref("");
const excelData = ref({});
const headers = ref({});
function upload() {
  action.value =
    "https://www.kaoyansou.cn/grad/school/encrypt/import/enroll/student";
  excelData.value = {
    applyOutRelationId: props.majorId,
  };
  headers.value = {
    token: store.state.token,
  };
  importDialog.value = true;
}
const deleteLoading = ref(false);
// 根据年份批量删除
function batchDelete() {
  ElMessageBox.confirm(`确定删除${selectYear.value}年份的录取信息?`, {
    title: "提示",
    type: "warning",
    center: true,
  })
    .then(() => {
      deleteLoading.value = true;
      onDelete();
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消",
      });
    });
}
async function onDelete(row) {
  let data = {
    applyOutRelationId: props.majorId,
    year: selectYear.value,
  };
  const result = await deleteStudent(data);
  const deRes = JSON.parse(decrypt(result));
  console.log(deRes);
  if (deRes.status === 0) {
    deleteLoading.value = false;
    ElMessage.success("删除成功!");
    getUseList();
  } else {
    deleteLoading.value = false;
    ElMessage.warning(deRes.msg);
  }
}
function onExceed(row) {
  if (row.length >= 1) {
    ElMessage.warning("超出上传限制，请删除后重新上传!");
  }
}
function onSuccess(result) {
  const deRes = JSON.parse(decrypt(result));
  if (deRes.status === 0) {
    ElMessage.success("上传成功!");
    importDialog.value = false;
    getUseList();
  } else {
    ElMessage.warning(deRes.msg);
  }
}
function handleClose() {
  editDialog.value = false;
}
const studyType = ref([
  {
    name: "全日制",
    value: "1",
  },
  {
    name: "非全日制",
    value: "0",
  },
]);
// 切换学习方式
function learningChange(val) {
  applyLearningStyle.value = val;
}
function handleDelete(row, type) {
  ElMessageBox.confirm(`确定删除${row.xm}的录取信息?`, {
    title: "提示",
    type: "warning",
    center: true,
  })
    .then(() => {
      deleteList(row, type);
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消",
      });
    });
}
async function deleteList(row) {
  let data = {
    applyOutRelationId: props.majorId,
    id: row.id,
  };
  const result = await deleteStudent(data);
  const deRes = JSON.parse(decrypt(result));
  console.log(deRes);
  if (deRes.status === 0) {
    ElMessage.success("删除成功!");
    getUseList();
  } else {
    ElMessage.warning(deRes.msg);
  }
}
const titleName = ref("新增录取信息");
const stateName = ref("add");
function addInfo(type, name) {
  titleName.value = "新增录取信息";
  stateName.value = name;
  ReferType.value = type;
  admissionFormData.value = {
    landSchoolCode: "",
    landSchoolName: "",
    oriXm: "",
    yjfxdm: "",
    yjfxnr: "",
    yzyxxdm: "",
    zydm: "",
    zymc: "",
    ssnf: "",
    kmycj: "",
    kmecj: "",
    kmscj: "",
    kmsicj: "",
    xm: "",
    yzyxxmc: "",
    zcj: "",
    cs: "",
    fs: "",
    zxjh: "",
    id: "",
  };
  editDialog.value = !editDialog.value;
}
// 编辑弹窗
const ReferType = ref(1);
function handleClick(row, type, name) {
  ReferType.value = type;
  stateName.value = name;
  console.log(row, "row");
  if (type == 1) {
    titleName.value = "编辑录取信息";
    admissionFormData.value = {
      landSchoolCode: row.landSchoolCode,
      landSchoolName: row.landSchoolName,
      oriXm: row.oriXm,
      yjfxdm: row.yjfxdm,
      yjfxnr: row.yjfxnr,
      yzyxxdm: row.yzyxxdm,
      zydm: row.zydm,
      zymc: row.zymc,
      ssnf: row.ssnf,
      kmycj: row.kmycj,
      kmecj: row.kmecj,
      kmscj: row.kmscj,
      kmsicj: row.kmsicj,
      xm: row.xm,
      yzyxxmc: row.yzyxxmc,
      zcj: row.zcj,
      cs: row.cs,
      fs: row.fs,
      zxjh: row.zxjh,
      id: row.id,
    };
  } else if (type == 2) {
    titleName.value = "编辑复试信息";
    retestFormData.value = {
      enrollFlag: row.enrollFlag,
      kmecj: row.kmecj,
      kmscj: row.kmscj,
      kmsicj: row.kmsicj,
      kmycj: row.kmycj,
      lqfs: row.lqfs,
      lqxxdm: row.lqxxdm,
      lqxxmc: row.lqxxmc,
      newdate: row.newdate,
      newtime: row.newtime,
      oriXm: row.oriXm,
      pch: row.pch,
      xxfsmc: row.xxfsmc,
      xydm: row.xydm,
      xymc: row.xymc,
      yjfxdm: row.yjfxdm,
      yzyxxdm: row.yzyxxdm,
      zydm: row.zydm,
      ssnf: row.ssnf,
      xm: row.xm,
      zymc: row.zymc,
      xxfsdm: row.xxfsdm,
      yjfxnr: row.yjfxnr,
      cs: row.cs,
      fs: row.fs,
      zxjh: row.zxjh,
      enrollFlagStr: row.enrollFlagStr,
      id: row.id,
    };
  }
  editDialog.value = true;
}
async function confirmEdit(type) {
  console.log(type, "type");
  buttonLoading.value = true;
  if (type == 1) {
    dataScholl.value = {
      enrollStudentRsp: {
        ssnf: admissionFormData.value.ssnf,
        kmycj: admissionFormData.value.kmycj,
        kmecj: admissionFormData.value.kmecj,
        kmscj: admissionFormData.value.kmscj,
        kmsicj: admissionFormData.value.kmsicj,
        xm: admissionFormData.value.xm,
        yzyxxmc: admissionFormData.value.yzyxxmc,
        zcj: admissionFormData.value.zcj,
        cs: admissionFormData.value.cs,
        fs: admissionFormData.value.fs,
        zxjh: admissionFormData.value.zxjh,
        id: admissionFormData.value.id,
        landSchoolCode: admissionFormData.value.landSchoolCode,
        landSchoolName: admissionFormData.value.landSchoolName,
        oriXm: admissionFormData.value.oriXm,
        yjfxdm: admissionFormData.value.yjfxdm,
        yjfxnr: admissionFormData.value.yjfxnr,
        yzyxxdm: admissionFormData.value.yzyxxdm,
        zydm: admissionFormData.value.zydm,
        zymc: admissionFormData.value.zymc,
      },
      gradSchoolRsp: {
        majorOutRelationId: props.majorId,
      },
    };
  } else if (type == 2) {
    dataScholl.value = {
      fushiRollRsp: {
        enrollFlag: retestFormData.value.enrollFlag,
        kmecj: retestFormData.value.kmecj,
        kmscj: retestFormData.value.kmscj,
        kmsicj: retestFormData.value.kmsicj,
        kmycj: retestFormData.value.kmycj,
        lqfs: retestFormData.value.lqfs,
        lqxxdm: retestFormData.value.lqxxdm,
        lqxxmc: retestFormData.value.lqxxmc,
        newdate: retestFormData.value.newdate,
        newtime: retestFormData.value.newtime,
        oriXm: retestFormData.value.oriXm,
        pch: retestFormData.value.pch,
        xxfsmc: retestFormData.value.xxfsmc,
        xydm: retestFormData.value.xydm,
        xymc: retestFormData.value.xymc,
        yjfxdm: retestFormData.value.yjfxdm,
        yzyxxdm: retestFormData.value.yzyxxdm,
        zydm: retestFormData.value.zydm,
        ssnf: retestFormData.value.ssnf,
        xm: retestFormData.value.xm,
        zymc: retestFormData.value.zymc,
        xxfsdm: retestFormData.value.xxfsdm,
        xxfsmc: retestFormData.value.xxfsdm == "1" ? "非全日制" : "全日制",
        yjfxnr: retestFormData.value.yjfxnr,
        cs: retestFormData.value.cs,
        fs: retestFormData.value.fs,
        zxjh: retestFormData.value.zxjh,
        enrollFlagStr: retestFormData.value.enrollFlagStr,
        id: retestFormData.value.id,
      },
      gradSchoolRsp: {
        majorOutRelationId: props.majorId,
      },
    };
  }
  console.log(dataScholl.value);
  if (stateName.value == "add") {
    let addData = {
      ssnf: admissionFormData.value.ssnf,
      kmycj: admissionFormData.value.kmycj,
      kmecj: admissionFormData.value.kmecj,
      kmscj: admissionFormData.value.kmscj,
      kmsicj: admissionFormData.value.kmsicj,
      xm: admissionFormData.value.xm,
      yzyxxmc: admissionFormData.value.yzyxxmc,
      zcj: admissionFormData.value.zcj,
      cs: admissionFormData.value.cs,
      fs: admissionFormData.value.fs,
      zxjh: admissionFormData.value.zxjh,
      id: admissionFormData.value.id,
      landSchoolCode: admissionFormData.value.landSchoolCode,
      landSchoolName: admissionFormData.value.landSchoolName,
      oriXm: admissionFormData.value.oriXm,
      yjfxdm: admissionFormData.value.yjfxdm,
      yjfxnr: admissionFormData.value.yjfxnr,
      yzyxxdm: admissionFormData.value.yzyxxdm,
      zydm: admissionFormData.value.zydm,
      zymc: admissionFormData.value.zymc,
      applyOutRelationId: props.majorId,
    };
    const result = await addStudent(addData);
    const deRes = JSON.parse(decrypt(result));
    console.log(deRes);
    if (deRes.status === 0) {
      buttonLoading.value = false;
      ElMessage.success("添加成功!");
      if (type == 1) {
        getUseList();
      } else if (type == 2) {
        getFushiList();
      }
      editDialog.value = !editDialog.value;
    } else {
      buttonLoading.value = false;
      ElMessage.warning(deRes.msg);
    }
  } else {
    const result = await correctMajorInfo(dataScholl.value);
    const deRes = JSON.parse(decrypt(result));
    console.log(deRes);
    if (deRes.status === 0) {
      buttonLoading.value = false;
      ElMessage.success("编辑成功!");
      if (type == 1) {
        getUseList();
      } else if (type == 2) {
        getFushiList();
      }
      editDialog.value = !editDialog.value;
    } else {
      buttonLoading.value = false;
      ElMessage.warning(deRes.msg);
    }
  }
}
const filterTag = (value, row) => {
  return row.enrollFlagStr === value;
};
// 点击tab
const activeName = ref(1);
const handleTabClick = (event) => {
  console.log(event);
  if (event == 1) {
    getUseList();
  } else if (event == 2) {
    getFushiList();
  }
};
const tableData = ref([]);
const loading = ref(false);
const props = defineProps({
  majorId: String,
});
// 选择的年份
const selectYear = ref("");
const yearOptions = ref([]);
// 所有数据
const allData = ref([]);
// 是否显示模糊效果
// 获取录取名单
async function getUseList() {
  try {
    tableData.value = [];
    allData.value = [];
    selectYear.value = "";
    yearOptions.value = [];
    loading.value = true;
    const data = {
      majorOutRelationId: props.majorId,
    };
    const result = await useList(data);
    const res = JSON.parse(decrypt(result));
    console.log(res, 233);
    if (res.status === 0 && res.result.length > 0) {
      const yearList = [...new Set(res.result.map((ele) => ele.ssnf))];
      yearOptions.value = yearList;
      allData.value = res.result;
      selectYear.value = yearList[0];
      tableData.value = res.result.filter((ele) => ele.ssnf == yearList[0]);
      loading.value = false;
    } else {
      tableData.value = [];
      allData.value = [];
      selectYear.value = "";
      yearOptions.value = [];
      selectYear.value = "";
      loading.value = false;
    }
  } catch (error) {
    loading.value = false;
    // throw new Error(error)
  }
}
// 获取复试名单
async function getFushiList() {
  try {
    tableData.value = [];
    allData.value = [];
    selectYear.value = "";
    yearOptions.value = [];
    loading.value = true;
    const data = {
      majorOutRelationId: props.majorId,
    };
    const result = await fushiList(data);
    const res = JSON.parse(decrypt(result));
    console.log(res, 233);
    if (res.status === 0 && res.result.length > 0) {
      const yearList = [...new Set(res.result.map((ele) => ele.ssnf))];
      yearOptions.value = yearList.reverse();
      allData.value = res.result;
      selectYear.value = yearList[0];
      tableData.value = res.result.filter((ele) => ele.ssnf == yearList[0]);
      loading.value = false;
    } else {
      tableData.value = [];
      allData.value = [];
      selectYear.value = "";
      yearOptions.value = [];
      selectYear.value = "";
      loading.value = false;
    }
  } catch (error) {
    loading.value = false;
    // throw new Error(error)
  }
}
// 改变选择年份
function yearChange(val) {
  selectYear.value = val;
  const res = allData.value.filter((ele) => ele.ssnf == val);
  tableData.value = res;
}
onMounted(() => {
  getUseList();
});
</script>
<style lang="less" scoped>
::v-deep .el-tabs__nav {
  padding-left: 80px;
}
.enroll {
  .header {
    text-align: right;
    .el-select {
      margin-left: 10px;
    }
  }
  .table {
    margin-top: 20px;
  }
}
.mohu {
  position: relative;
  z-index: 9;
}

.mohu-filter {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
  background-color: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
